<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>确认订单</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/vue-2.4.0.js"></script>
    <script src="js/axios_v0.12.0.js"></script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <div class="top-sch-box top-sch-boxtwo flex-col">
        确认订单
    </div>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="confirm clearfloat">
        <div class="add clearfloat box-s">
            <a href="choice-address.html">
                <div class="left clearfloat fl">
                    <i class="iconfont icon-dizhi1"></i>
                </div>
                <div class="middle clearfloat fl">
                    <p class="tit add-man">
                        收货人：王小王&nbsp;&nbsp;&nbsp;&nbsp;15806976589
                    </p>
                    <p class="fu-tit over2 add-info">
                        收货地址：安徽省合肥市高新区长江西路拓基城市广场金座A2002
                    </p>
                </div>
                <div class="left clearfloat fr">
                    <i class="iconfont icon-jiantou1"></i>
                </div>
            </a>
        </div>
        <div id="orderInfoBody">
            <div v-for="(cart,idx) in carts" class="lie clearfloat">
                <a href="detail.html">
                    <div class="tu clearfloat fl">
                        <img id="image" :src="cart.image+'1_big.png'"/>
                    </div>
                </a>
                <div class="right clearfloat fl">
                    <a href="detail.html">
                        <p class="tit over">{{cart.title}}</p>
                        <p class="fu-tit">{{cart.itemType}}</p>
                    </a>
                    <div class="xia clearfloat">
                        <a href="detail.html">
                            <p class="jifen fl over">{{cart.realPrice}}</p>
                        </a>
                        <span class="fr db">×{{cart.num}}</span>
                    </div>
                </div>
                <div class="gmshu gmshutwo clearfloat box-s fl">
                    <div class="gcontent clearfloat">
                        <p class="fl">配送方式</p>
                        <div class="you clearfloat fr">
                            <span>快递 免邮</span>
                            <i class="iconfont icon-jiantou1"></i>
                        </div>
                    </div>
                </div>
                <div class="gmshu gmshutwo clearfloat box-s fl">
                    <div :id="'bill-'+cart.pid" class="gcontent clearfloat">
                        <p class="fl">发票信息</p>
                        <div class="you clearfloat fr">
                            <div class="xuan clearfloat">
                                <div class="radiotwo">
                                    <label>
                                        <input type="radio" :name="'fapiao'+cart.pid" value="1"/>
                                        <div class="option"></div>
                                        <span class="opt-text">需要发票</span>
                                    </label>
                                </div>
                            </div>
                            <div class="xuan clearfloat">
                                <div class="radiotwo">
                                    <label>
                                        <input type="radio" :name="'fapiao'+cart.pid" value="0"
                                               checked="checked"/>
                                        <div class="option"></div>
                                        <span class="opt-text">不需要发票</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="gmshu gmshuthree clearfloat box-s fl">
                    <div class="gcontent clearfloat">
                        <p class="fl">买家留言</p>
                        <div class="you clearfloat fl">
                            <input type="text" name="" :id="'msg-'+cart.pid" value="" class="text"
                                   placeholder="选填 对本次交易需求给商家留言"/>
                        </div>
                    </div>
                </div>

                <div class="gmshu clearfloat box-s fl">
                    <p class="fr">共{{cart.num}}件商品 合计<samp>￥{{cart.realPrice*cart.num}}</samp></p>
                </div>

            </div>
            <div class="integral clearfloat fl box-s">
                <div class="zuo clearfloat fl">
                    当前积分余额:<span id="point"></span>
                </div>
                <!--                <div class="you clearfloat fr">-->
                <!--                    <div class="xuan clearfloat">-->
                <!--                        <div class="radiothree">-->
                <!--                            <label>-->
                <!--                                <input type="checkbox" name="fapiao" value=""/>-->
                <!--                                <div class="option"></div>-->
                <!--                            </label>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
        </div>
    </div>
</div>
<!--settlement star-->
<div class="settlement clearfloat">
    <div class="zuo clearfloat fl box-s">
        共<span id="totalNum"></span>件 总金额：<span id="totalPrice"></span>
    </div>
    <a href="#" onclick="createOrder()" class="fl db">
        提交订单
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="index.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a id="center_link" href="login.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script>
    $("#center_link").click(function (event) {
        event.preventDefault();

        $.post("/users/checkLogin", function (result) {
            if (result.state == 1000) {
                window.location.href = "center.html";
            } else {
                window.location.href = "login.html";
            }
        });
    });
</script>
<script type="text/javascript">
    var cartListUrl = "../carts/findByCids";
    var createOrderUrl = "../orders/create";
    var userPointUrl = "../points/getByUid";
    var defUrl = "/addresses/getDefault"
    var pids = [];//保存所有的pid
    var aid = 0;


    $(function () {
        $(".loading").addClass("loader-chanage")
        $(".loading").fadeOut(300)





        var vueObj = new Vue({
            el: '#orderInfoBody',
            data: {
                addrs: [],
                carts: [],
                totalNum: 0,
                totalPrice: 0
            }
        });

        // 获取地址栏中的请求参数
        var map = getPathParams();
        var cids = map.get("cids");
        var params = {
            cids: cids
        }

        //获取用户默认地址
        $.get(defUrl, function (result) {
            if (result.state == 1000) {
                let addr_tmp = result.data;
                $(".add-man").html(addr_tmp.name)
                $(".add-info").html(addr_tmp.provinceName + addr_tmp.cityName + addr_tmp.areaName + addr_tmp.address)
                aid = addr_tmp.aid}
        })


        // 获取购物车数据
        $.get(cartListUrl, params, function (result) {
            if (result.state == 1000) {
                vueObj.carts = result.data;
                var totalNum = 0;
                var totalPrice = 0;
                // 计算总数量和总金额 和商品id
                for (var index in result.data) {
                    totalNum += result.data[index].num;
                    totalPrice += (result.data[index].num * result.data[index].realPrice);
                    if (result.data.length - 1 != index) {
                        pids += result.data[index].pid + ",";
                    } else {
                        pids += result.data[index].pid;
                    }
                }
                vueObj.totalNum = totalNum;
                vueObj.totalPrice = totalPrice;
                //计算钱数和总数量
                $("#totalNum").html(totalNum);
                $("#totalPrice").html(totalPrice);
            } else {
                alert(result.msg);
            }
        });
    })

    //获取当前用户积分
    $.get(userPointUrl, function (result) {
        if (result.state == 1000) {
            if(result.msg==false){
                $("#point").html(0);
            }else {
                $("#point").html(result.data.num.toFixed(0));
            }
        }
    });


    // 获取地址栏中所有参数构成的Map集合
    function getPathParams() {
        var map = new Map();
        // 获取地址栏中的id参数
        var path = window.location.href;
        var index = path.lastIndexOf("?");
        if (index != -1) {
            var params = path.substring(index + 1);
            var array = params.split("&");

            if (array.length > 0) {
                for (var index in array) {
                    var arr = array[index].split("=");
                    // 将一组参数存入map集合
                    map.set(arr[0], arr[1]);
                }
            }
        }
        return map;
    }

    // 获取留言和发票参数构成的Map集合
    function getInfoParams() {
        //分割商品id
        var array = pids.split(",");
        var params = [];
        if (array.length > 0) {
            for (var index in array) {
                var pid = array[index];
                var msg = $("#msg-" + pid).val();
                var bill = $("input[name='fapiao" + pid + "']:checked").val();
                var param = "";
                param = pid + "-" + msg + "-" + bill;
                params.push(param);
                // var param = '{"msg":"' + msg + '","bill":"' + bill + '"}';
                // params.push('{"'+pid+'":'+param+'}');
            }
        }
        return params;
    }

    // 发送创建订单请求的方法
    function createOrder() {
        //var aid=$("#selAddr option:selected").val();
        var infoParam = getInfoParams();
        var cids = getPathParams().get("cids");
        var params = {
            aid: aid,
            cids: cids,
            infoParam: infoParam.toString(),
        }
        $.post(createOrderUrl, params, function (result) {
            if (result.state == 1000) {
                var orderCoder = result.data.orderCode;
                var price = result.data.price;
                var oid = result.data.id;
                window.location.href = "submit-order.html?" + orderCoder + "," + price + "," + oid;
            } else {
                alert(result.msg);
            }
        });
    }

</script>

</html>
